<template>
	<view class="page">
		<view class="border">
			
		</view>
		<uni-list :border="false">
			<uni-list-item :isBorder="true" :extraIcon="extraIcon" showExtraIcon="true" >
				<view v-if="selectedAddress.id == null"  class="zy-phone" @click="updateAddress">
					您还没有默认收货地址哦，点击选择收货地址
				</view>
				<view v-else class="zy-phone" @click="updateAddress">
					<view class="slot-box">
						<text class="slot-text">{{selectedAddress.realName}}</text>
						<text class="slot-text" style="margin-left: 10rpx;">{{selectedAddress.phone}}</text>
					</view>
					<text class="uni-list-item__content-note">{{selectedAddress.school}}{{selectedAddress.storiedBuilding}}{{selectedAddress.area}}</text>
				</view>
				<view slot="right" class="right" @click="updateAddress">
					地址簿
				</view>
			</uni-list-item>
			<view class="zy-des">
				<textarea selectable="true" class="text"  placeholder-class="text-class" v-model="addDetails.notes"  placeholder="请黏贴取件码,快递柜或取件短信" />
				<view class="btn">
					<view @click="empty">
						清空
					</view>
					<view @click="stickup">
						粘贴
					</view>
				</view>
			</view>
			<view class="zy-border">
				
			</view>
			<view class="zy-border">
				
			</view>
			<uni-list-item :isBorder="true" title="取件点" showExtraIcon="true"  @click="qujian" :rightText="selectedAddress.id ?addDetails.expressType?addDetails.expressType:'请选择取件点':'请选择你的收货地址'" link>
				
			</uni-list-item>
			<uni-list-item :isBorder="true" title="包裹类型" showExtraIcon="true" @click="parcel" :rightText="selectedAddress.id?addDetails.parcel?addDetails.parcel:'请选择包裹大小':'请选择你的收货地址'" link>
				
			</uni-list-item>
			<uni-list-item :isBorder="true" title="派送时间" showExtraIcon="true" @click="delivery" :rightText="selectedAddress.id?addDetails.delivery?addDetails.delivery:'请选择派送时间':'请选择你的收货地址'" link>
				
			</uni-list-item>
			<!-- <uni-list-item  title="优惠减免" showExtraIcon="true" rightText="优惠券" link>
				
			</uni-list-item> -->
		</uni-list>
		<view class="warn" @click="isChecked">
			<view class="slot-box" >
				<zywork-icon v-if="addDetails.checked"  type="icongou" color="#00aa7f" size="40"  />
				<view v-else  class="zy-checked"></view>
			</view>
			<view >
				我已阅读并同意
			</view>
			<view @click.stop="showProtocol">
				《包裹配送服务协议》
			</view>
		</view>
		<view class="zy-bootom">
			<view :class="addDetails.amount>0?'active':''">
				￥{{addDetails.amount > 0?addDetails.amount:'--'}}
			</view>
			<view :class="addDetails.amount>0?'active':''"  @click="submit">
				下单
			</view>
		</view>
		<uni-popup ref="qujiandian" type="bottom">
			<scroll-view  scroll-y="true" class="popup-bottom">
				<uni-list>
					<uni-list-item v-for="(item,index) in qujianArr" :isBorder="true" :title="item.place" showExtraIcon="true"
					 zyworkIconRightSize="40" @click="qujianChang(index)" zyworkIconRightColor="#00aa7f" :zyworkIcon="qujianArrIndex == index?'icongou':''" 
					 :note="item.notes" link>
					</uni-list-item>
				</uni-list>
			</scroll-view>
		</uni-popup>
		<uni-popup ref="parcelType" type="bottom">
			<scroll-view  scroll-y="true" class="popup-bottom">
				<uni-list>
					<uni-list-item v-for="(item,index) in parcelTypeArr" :isBorder="true" :title="item.parcel" showExtraIcon="true"
					 zyworkIconRightSize="40" @click="parcelTypeChang(index)" zyworkIconRightColor="#00aa7f" :zyworkIcon="parcelTypeIndex == index?'icongou':''" 
					 :note="item.notes" link>
					</uni-list-item>
				</uni-list>
			</scroll-view>
		</uni-popup>
		<uni-popup ref="delivery" type="bottom">
			<scroll-view  scroll-y="true" class="popup-bottom">
				<uni-list>
					<uni-list-item v-for="(item,index) in deliveryArr" :isBorder="true" :title="item.delivery" showExtraIcon="true"
					 zyworkIconRightSize="40" @click="deliveryChang(index)" zyworkIconRightColor="#00aa7f" :zyworkIcon="deliveryIndex == index?'icongou':''"  link>
					</uni-list-item>
				</uni-list>
			</scroll-view>
		</uni-popup>
		<view v-if="isShowProtocol" class="zy-protocol" >
			<view class="view-content">
				<text class="">
					包裹配送服务协议
				</text>
				<scroll-view class="scroll-Y"  :scroll-y="true" :scroll-top="scrollTop">
					<view class="view-y">
						(1) 若填错宿舍地址、电话号码、快递信息等，可以直接联系客服。
					</view>
					<view class="view-y">
						(2) 包裹的重量或体积大小规格填写有误:我们会按照实际的规格来收费。若您的包裹实际规格比下单所选的规格要小，可以联系客服退回差额。若您的包裹实际规格比下单所选的规格要大，平台会向您发送差价支付，需要您支付一下差价，请您谅解。
					</view>
					<view class="view-y">
						(3)若填错宿舍地址、电话号码、快递信息等，可以直接联系客服。
					</view>
					<view class="view-y">
						(4) 包裹的重量或体积大小规格填写有误:我们会按照实际的规格来收费。若您的包裹实际规格比下单所选的规格要小，可以联系客服退回差额。若您的包裹实际规格比下单所选的规格要大，平台会向您发送差价支付，需要您支付一下差价，请您谅解。
					</view>
				</scroll-view>
				<view class="zy-btn" @click="showProtocol">
					我已阅读同意
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	import uniList from '@/components/uni-list/uni-list.vue'
	import uniListItem from '@/components/uni-list-item/uni-list-item.vue'
	import zyworkIcon from '@/components/zywork-icon/zywork-icon.vue'
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import {
		BASE_URL,
		USER_TOKEN_KEY,
		DEFAULT_HEADICON,
		showSuccessToast,
		showInfoToast,
		doGet,
		doPostJson,
		nullToStr,
		FRONT_BASE_URL,
		LOCAL_FILE_STORAGE,
		USER_SCHOOL
	} from '@/common/util.js'
	import * as ResponseStatus from '@/common/response-status.js'
	export default {
		components: {
			uniList,
			uniListItem,
			zyworkIcon,
			uniPopup
		},
		data() {
			return {
				extraIcon: {
					color: '#0ac3e8',
					size: 50,
					type: 'icondingwei'
				},
				addDetails:{
					checked:false,
					expressType:"",
					parcelType:"",
					delivery:"",
					amount:0,
					notes:""
				},
				selectedAddress: {
					id:null
				},
				parcelTypeArr:[],
				parcelTypeIndex:-1,
				qujianArr:[],
				qujianArrIndex:-1,
				deliveryArr:[
					{
						delivery:"12:00--14:00(当天11点前下单)",
					},
					{
						delivery:"19:00--21:00(当天17:00前下单)",
					},
					{
						delivery:"19:00--21:00(中午不在宿舍,需要晚上送达)",
					}
				],
				deliveryIndex:-1,
				isShowProtocol:false,
				submitAddress: false
			};
		},
		onLoad(option){
			this.loadDefaultAddress()
			
		},
		methods:{
			//复制到黏贴版
			stickup(){
				wx.getClipboardData({
				  success: res=> {
					console.log(res.data)
					this.addDetails.notes = res.data
				  }
				})
			},
			//复制到黏贴版
			empty(){
				this.addDetails.notes = ""
			},
			showProtocol(){
				if(this.isShowProtocol){
					this.isShowProtocol = false;
				}else {
					this.isShowProtocol = true;
				}
			},
			submit(){
				if(!this.selectedAddress.id){
					showInfoToast('请选择你的地址');
					return;
				}
				if(!this.selectedAddress.schoolId){
					showInfoToast('你所选择的地址没有学校信息');
					return;
				}
				if(this.selectedAddress.schoolId!=uni.getStorageSync(USER_SCHOOL)){
					showInfoToast('你的收货地址不在当前校区的配送范围内');
					return;
				}
				if(!this.addDetails.notes){
					showInfoToast('请填写你的取件码');
					return;
				}
				if(!this.addDetails.placeId){
					showInfoToast('请选择你的取件点');
					return;
				}
				if(!this.addDetails.parcelId){
					showInfoToast('请选择你的包裹类型');
					return;
				}
				if(!this.addDetails.delivery){
					showInfoToast('请选择你的配送时间');
					return;
				}
				if(!this.addDetails.checked){
					showInfoToast('请阅读包裹配送服务协议');
					return;
				}
				this.submitAddress =true
				let data ={
					 "schoolId": this.selectedAddress.schoolId,
					 "addressId": this.selectedAddress.id,
					 "placeId": this.addDetails.placeId,
					 "parcelId": this.addDetails.parcelId,
					 "delivery": this.addDetails.delivery,
					 "notes": this.addDetails.notes
				}
				doPostJson("/school-order/user/place", data, {}, true).then(response => {
					let [error, res] = response;
					if (res.data.code === ResponseStatus.OK) {
						if(res.data.data){
							let orderId = res.data.data;
							this.submitAddress =false
							let type='kddn'
							uni.redirectTo({
								url: `/pages/money/pay?orderIdAndNos=${orderId}&totalPay=${this.addDetails.amount}&types=${type}`
							})
						}
					} else {
						showInfoToast(res.data.message)
					}
				}).catch(err => {
					console.log(err)
				})
			},
			//加载默认地址
			loadDefaultAddress() {
				doPostJson('/shipping-address/user/pager-cond-list', {
					pageNo: 1,
					pageSize: 1,
					isDefault: 1,
				}, {}, true).then(response => {
					let [error, res] = response
					if (res.data.code === ResponseStatus.OK) {
						if (res.data.data.rows.length === 1) {
							this.selectedAddress = res.data.data.rows[0]
							this.getSchoolParcelList();
							this.getSchoolParceList();
						}
					} else if (res.data.code === ResponseStatus.AUTHENTICATION_TOKEN_ERROR) {
						invalidToken()
						setTimeout(() => {
							toLogin()
						}, 3000)
					}
				}).catch(error => {
					console.log(error)
				})
			},
			updateAddress(){
				uni.navigateTo({
					url:"/pages/address/address?source=1"
				})
			},
			// 加载包裹类型
			getSchoolParcelList(){
				if(this.selectedAddress.id!=null){
					doPostJson('/school-parcel/any/bySchoolId/'+this.selectedAddress.schoolId, {}, {}, true).then(response => {
						let [error, res] = response;
						if (res.data.code === ResponseStatus.OK) {
							const rows = nullToStr(res.data.data);
							this.parcelTypeArr = rows
						} else {
							showInfoToast(res.data.message);
						}
						uni.hideLoading()
					}).catch(err => {
						console.log(err);
					})
				}
			},
			// 加载取件点列表
			getSchoolParceList(){
				if(this.selectedAddress.id!=null){
					doPostJson('/school-place/any/bySchoolId/'+this.selectedAddress.schoolId, {}, {}, true).then(response => {
						let [error, res] = response;
						if (res.data.code === ResponseStatus.OK) {
							const rows = nullToStr(res.data.data);
							this.qujianArr = rows
						} else {
							showInfoToast(res.data.message);
						}
						uni.hideLoading()
					}).catch(err => {
						console.log(err);
					})
				}
			},
			isChecked(){
				if(this.addDetails.checked){
					this.addDetails.checked = false;
				}else{
					this.addDetails.checked = true;
				}
			},
			qujian(){
				if(this.selectedAddress.id){
					this.$refs.qujiandian.open()
				}
			},
			parcel(){
				if(this.selectedAddress.id){
					this.$refs.parcelType.open()
				}
			},
			delivery(){
				if(this.selectedAddress.id){
					this.$refs.delivery.open()
				}
			},
			qujianChang(index){
				this.qujianArrIndex = index;
				this.addDetails.placeId = this.qujianArr[index].id
				this.addDetails.expressType = this.qujianArr[index].place
				this.$refs.qujiandian.close();
			},
			parcelTypeChang(index){
				this.parcelTypeIndex = index;
				this.addDetails.parcelId = this.parcelTypeArr[index].id
				this.addDetails.parcel = this.parcelTypeArr[index].parcel
				this.addDetails.amount = this.parcelTypeArr[index].amount
				this.$refs.parcelType.close();
			},
			deliveryChang(index){
				this.deliveryIndex = index;
				this.addDetails.delivery = this.deliveryArr[index].delivery
				this.$refs.delivery.close();
			}
		}
	}
</script>

<style lang="scss">
	@import '@/common/zywork-main.scss';
	.page{
		width: 100%;
		background-color: #eeeeee;
		height: 100%;
	}
	.right{
		color: #00aa7f;
		padding:30rpx 0rpx ;
		padding-left: 30rpx;
		border-left: solid 1rpx $border-color;
	}
	.zy-phone{
		@include flex-center-column;
	}
	.uni-list-item__content-note {
		margin-top: 6rpx;
		color: $uni-text-color-grey;
		font-size: $uni-font-size-sm;
		overflow: hidden;
	}
	.slot-box {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		padding: 10rpx 0rpx;
	}
	.slot-text{
		color: #3b4144;
		font-size: $font-base;
	}
	.zy-des{
		padding: 30rpx $padding-left-right;
		width: 100%;
		// height: 300rpx;
		@include flex-center-column;
		.text{
			padding: 20rpx 30rpx;
			width: 100%;
			height: 230rpx;
			border-radius: 35rpx;
			background-color: #00d39b;
		}
		.text-class{
			color: #FFFFFF;
		}
		.btn{
			@include flex-center-row;
			align-items: center;
			justify-content: center;
			padding: 0rpx 100rpx;
			padding-top: 25rpx;
			view:nth-child(1){
				width: 150rpx;
				height: 70rpx;
				line-height: 70rpx;
				border-radius: 35rpx;
				font-size: $font-base;
				background-color:$info-color ;
				color: #686b6c;
				text-align: center;
			}
			
			view:nth-child(2){
				width: 150rpx;
				height: 70rpx;
				line-height: 70rpx;
				border-radius: 35rpx;
				font-size: $font-base;
				background-color:#00f3b2 ;
				color: #009c72;
				text-align: center;
				margin-left: auto;
			}
		}
	}
	.zy-checked{
		width: 40rpx;
		height: 40rpx;
		border: solid 1rpx #00aa7f;
		border-radius: 50%;
	}
	.warn{
		@include flex-center-row;
		align-items: center;
		justify-content: center;
		view:nth-child(2){
			padding: 0rpx 10rpx;
			font-size: $font-base;
		}
		view:nth-child(3){
			font-size: $font-base;
			color: #b1b1b1;
		}
	}
	.popup-bottom{
		width: 100%;
		height: 600rpx;
		background-color: $primary-backcolor;
	}
	.border{
		border-bottom: solid 1rpx $border-color;
	}
	.zy-bootom{
		position: fixed;
		bottom: 0rpx;
		width: 100%;
		background-color: $primary-backcolor;
		padding: 30rpx $padding-left-right;
		@include flex-center-row;
		align-items: center;
		view:nth-child(1){
			font-size: 40rpx;
			color: #bcbcbc;
			&.active{
				color: #ff3426;
			}
		}
		view:nth-child(2){
			width: 180rpx;
			height: 70rpx;
			line-height: 70rpx;
			text-align: center;
			background-color: $button-background-disabed-color;
			color: #ffffff;
			border-radius: 50rpx;
			margin-left: auto;
			&.active{
				background-color: #00aa7f;
			}
		}
	}
	.zy-protocol{
		z-index: 999;
		position: fixed;
		top: 0;
		left: 0;
		flex: 1;
		width: 100%;
		height: 100%;
		background: rgba(73,73,73,0.9);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		.view-content{
			padding: 10rpx 30rpx;
			width: 80%;
			background-color: #FFFFFF;
			border-radius: 15rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			text{
				width: 100%;
				height: 50rpx;
				line-height: 50rpx;
				color: #848484;
				font-size: $font-lg;
				text-align: center;
			}
			.scroll-Y{
				width: 100%;
				height: 650rpx;
				flex: 1;
				background-color: #FFFFFF;
				display: flex;
				flex-direction: column;
				align-items: center;
				// justify-content: center;
				.view-y{
					padding: 5rpx 0rpx;
					width: 100%;
					font-size: $font-base;
				}
			}
			.zy-btn{
				width: 90%;
				padding: 20rpx 20rpx;
				background-color: #00AA7F;
				text-align: center;
				color: #FFFFFF;
				font-size: $font-lg;
				border-radius: 35rpx;
			}
		}
		
	}
</style>
